<template>
	<div style="flex: 1;">
		<list style="margin-top: 20px;">
			<cell>
				<div class="detailed-box-content" v-for="item in emptyBarrelList">
					<div style="display:flex;flex-direction: row;  justify-content: space-between;padding: 20px; padding-top: 0px; ">
						<div style="display:flex;flex-direction: row;">
							<image :src="item.thumbnail"  style="height:170px;width:170px;"></image>
							<div class="detailed-title">
								<!-- <text class="detailed-type">{{item.quantity >= 0? '回桶': '出桶'}}</text> -->
								<text class="detailed-name">{{item.name}}</text>
								<text class="detailed-date">{{item.createDate}}</text>
								<text class="detailed-memo">说明: {{item.memo}}</text>
							</div>
						</div>
						<div style="display: flex; flex-direction: row;">
							<!-- <text class="order_price_number">{{item.quantity}} </text> -->
							<text class="order_price_number" :style="{'color': item.quantity >= 0? '': 'red' }">{{ item.quantity }}</text>
						</div>
					</div>
					<div class="grap"></div>
				</div>
				<div style="height: 100px;"></div>
			</cell>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<!-- <text class="indicator-text">Loading ...</text> -->
				<loading-indicator class="indicator"></loading-indicator>
			</loading>
		</list>
		<div class="bottom-button">
			<button class="button" text="欠桶登记" @click="goEdit('出桶')"></button>
			<button class="button" text="存桶登记" @click="goEdit('回桶')"></button>
		</div>
	</div>
</template>
<script>
const modal = weex.requireModule('modal');
import { list } from '../../../../../api/emptyBarrel.js'
export default {
  name: '',
  props:['id'],
  data () {
    return {
		emptyBarrelList: [],
		pageNum: 1,
		pageSize: 10,
		loadinging: false,
	}
  },
  created () {
	 this.loadEmptyBarrel(1)
  },
  methods: {
	  loadEmptyBarrel(one) {
		this.loadinging = true;
	  	list({ memberId: this.id, subType: 3, pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
	  		res.data.data.forEach(item => {
	  			item.createDate = this.formatTime(item.createDate)
	  		})
	  		this.emptyBarrelList = [...this.emptyBarrelList, ...res.data.data]
			eeui.loadingClose();
			this.loadinging = false;
			let maxPageNum = Math.ceil(res.data.total / this.pageSize);
			if (this.pageNum > maxPageNum && !one) {
				modal.toast({ message: '已经没有更多数据', duration: 1 });
			}
	  	}).catch(() => {
			eeui.loadingClose();
			this.loadinging = false;
		})
	  },
	  goEdit(title) {
		eeui.openPage({
		    url: 'root://pages/member/memberInfo/emptyBarrel/emptyBarrelRegister.js',
		    params: { id: this.id, title: title},
		    statusBarType: 'immersion',
		    statusBarStyle: false
		}, res => {
		    if (res.status == 'stop') {
		        storage.getItem('register', result => {
		            if (result.data == 'edit') {
						this.pageNum = 1
						this.emptyBarrelList = []
		                this.loadEmptyBarrel()
		                storage.removeItem('register')
		            }
		        });
		    }
		})
	  },
	  onloading() {
	  	// 上拉加载
	  	if (this.loadinging == false) {
	  		this.pageNum += 1;
	  		// modal.toast({ message: '加载中', duration: 1 });
	  		eeui.loading();
	  		this.loadEmptyBarrel();
	  	}
	  }
  },
}
</script>

<style scoped>
	.detailed-box-content {
		background-color: white;
		width: 750px;
		padding-top: 40px;
		box-sizing: border-box;
	}
	
	.detailed-title {
		margin-left: 20px;
		width: 300px;
		display: flex;
		flex-direction: column;
	}
	
	.detailed-memo {
		font-size: 25px;
		margin-bottom: 10px;
	}
	
	.detailed-name {
		font-size: 25px;
		margin-bottom: 10px;
	}
	
	.detailed-date {
		font-size: 25px;
		margin-bottom: 10px;
		color: #808080;
	}
	
	.yue {
		font-size: 18px;
		font-family: PingFangSC;
		font-weight: 400;
		color: #1a1a1e;
		opacity: 0.3;
	}
	
	.price-content {
		display: flex;
		height: 80px;
		flex-direction: column;
		justify-content: space-between;
	
	}
	
	.price {
		float: right;
		color: #FF6347;
		font-weight: 700;
		font-size: 18px;
	}
	
	.total-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
		align-items: flex-end;
		padding-right: 35px;
		padding-left: 10px;
		padding-bottom: 20px;
	}
	
	.order_list_content_left {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
		margin-left: 20px;
		width: 600px;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	.order_price_title {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	
	
	}
	
	.order_price_number {
		font-size: 25px;
	
	}
	
	.grap {
		width: 750px;
		height: 20px;
		background-color: rgb(248, 248, 248);
	}
	
	.button_click {
		font-weight: 400;
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		border: 1px solid;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(126, 128, 136, 0.8);
	}
	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750px;
		height: 100px;
		background-color: rgb(248, 248, 248);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.button {
		font-size: 28px;
		font-weight: 400;
		color: white;
		width: 150px;
		height: 50px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		background-image: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
		margin-right: 20px;
	}
	.loading {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}
	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;
		color: blue;
	}
</style>
